<template>
  <div id="app" class="bg-grid">  
      <div class="title">TodoList</div>
      <serach :receive="receive"></serach>
      <todolist :todo="todo"
        :showCompleted="showCompleted"
        :checkTodo="checkTodo"
        :deleteitem="deleteitem"></todolist>
      <mainfooter :todo='todo' :handleCompleted='handleCompleted' :showCompleted="showCompleted"></mainfooter>
  </div>
</template>

<script>
  import Mainfooter from './components/footer.vue'
  import Serach from './components/serach.vue'
  import Todolist from './components/todolist.vue'
  import axios from "axios"
  export default {

    name: 'App',
    components: {
      Todolist,
      Serach,
      Mainfooter, 
    },
    props:{
    },
    data(){
      return {
          todo:[],
          showCompleted: false
      }
  },
  mounted(){
      this.getdata();
    },
  methods: {
    getdata() {
        axios.get("http://127.0.0.1:8081/getItem").then((data) => {
            console.log(data);
            this.todo = data.data;
        })
        .catch((err) => {
            console.log(err);
        });
    },
    receive(obj){
      this.todo.unshift(obj)
    },
    checkTodo(id){
      this.todo.forEach(todo => {
        if(todo.id === id) todo.done =! todo.done
      })
    },
    handleCompleted(){
      this.showCompleted = !this.showCompleted;
    },
    changeData (type, data) {
      console.log('changeData',data)
      if (type === 'clickConfirm') {
          if (data.operate === 'exchange') {
            // this.reduceEnergy(data.shop)
            this.exchangeCoupon(data.shop)
          } else if (data.operate === 'downLoad') {
            window.location = data.url
          } else if (data.operate === 'login') {
            this.uplusApi.upVdnModule.goToPage({url: 'mpaas://usercenter'})
            this.isLogin = false
          }
      }
    }
  }
}
  



</script>

<style >
  * {
    margin: 0;
    padding:0;
  }
 
  #app {
    width: 600px;
    margin: 0 auto;
  }
  .title {
    height: 40px;
    background-color: rgb(135, 123, 123);
    color: white;
    text-align: center;
    line-height: 40px;
    font-size: 30px;
  }
  .bg-grid {
    padding: 10px;
    padding-top: 64px;
    background-color: #efefef;
    background-image: linear-gradient(#e7e6e6 1px, transparent 0),
    linear-gradient(90deg, #e7e6e6 1px, transparent 0);
    background-size: 21px 21px, 21px 21px;
    background-position: center;
  }

  .bg-grid:before,
  .bg-grid:after{
    content: '';
    position: absolute;
    z-index: 0;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    background-color: #fff;
    height: 28px;
    box-shadow: 68px 0 0 0 #fff,
    calc(68px * 2) 0 0 0 #fff,
    calc(68px * 3) 0 0 0 #fff,
    calc(68px * 4) 0 0 0 #fff,
    calc(68px * 5) 0 0 0 #fff,
    -68px 0 0 0 #fff,
    calc(68px * -2) 0 0 0 #fff,
    calc(68px * -3) 0 0 0 #fff,
    calc(68px * -4) 0 0 0 #fff,
    calc(68px * -5) 0 0 0 #fff;
  }

  .bg-grid:before {
    top: 0;
    width: 10px;
  }

  .bg-grid:after {
    top: 26px;
    width: 28px;
    border-radius: 50%;
  }
</style>
